/*
 * This file is part of Avenge <https://adblockplus.org/>,
 * Copyright (C) 2006-present eyeo GmbH
 *
 * Avenge is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as
 * published by the Free Software Foundation.
 *
 * Avenge is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Avenge.  If not, see <http://www.gnu.org/licenses/>.
 */

html
{
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body
{
  margin: 0;
  padding: 0;
}

#container
{
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.column
{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

 #graphic-column,
 .graphic-column
{
  background-color: #8DC446;
}

#content
{
  padding: 0 3em;
  max-width: 760px;
}

#content a
{
  color: #C70D2C;
  text-decoration: none;
}

#optionsPageLink
{
  color: red;
}

/* Needed in order to achieve standard behavior 
for links, due to lacking href attribute */
#content a:hover
{
  text-decoration: underline;
  cursor: pointer;
}

#content header
{
  margin: 0 0 2em 5em;
}

html[dir="rtl"] #content header
{
  margin: 0 5em 2em 0;
}

#content header p {
  margin: 0;
  opacity: 0.5;
  font-weight: 400;
  font-size: 1.2em;
}

#content header h1
{
  margin: 0;
}

.custom-feature-entry
{
  margin-top: 2em;
}

.custom-feature-entry h2
{
  margin: 0 0 0 3.4em;
}

html[dir="rtl"] .custom-feature-entry h2
{
  margin: 0 3.4em 0 0;
}

.update-graphic-container
{
  display: flex;
  align-items: center;
  position: relative;
  width: 560px;
  height: 460px;
  background-image: url(./updates/base-graphic.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.update-graphic-container img
{
  display: block;
  width: 162px;
  height: 162px;
}

.update-graphic-content
{
  display: flex;
  align-items: center;
  position: absolute;
  top: 65px;
  left: 100px;
}

.version-details
{
  margin: 0 1em 0 1em;
}

.version-details h2
{
  margin: 0;
}

.feature-entry
{
  display: flex;
  align-items: center;
  padding: 0 1em;
}

.feature-entry img
{
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 1em 0 0;
}

html[dir="rtl"] .feature-entry img
{
  margin: 0 0 0 1em;
}

#block-ads-text > strong
{
  text-decoration: line-through;
  font-weight: 400;
}

.store-buttons
{
  height: 58px;
  margin: 0 0 0 5em;
}

html[dir="rtl"] .store-buttons
{
  margin: 0 5em 0 0;
}

.store-button
{
  display: block;
  height: 58px;
  border-radius: 6px;
  background-color: #000;
  float: left;
  margin-bottom: 1em;
}

html[dir="rtl"] .store-button
{
  float: right;
}

.store-button > img
{
  height: 100%;
}

.applestore-button
{
  margin-right: 1em;
}

html[dir="rtl"] .applestore-button
{
  margin-right: 0;
  margin-left: 1em;
}

@media(max-width: 960px)
{
  #container
  {
    flex-direction: column-reverse;
  }
}

@media(max-width: 480px)
{
  #content header
  {
    margin: 2em 0 2em 5em;
  }

  .column
  {
    align-items: flex-start;
  }

  html[dir="rtl"] .applestore-button
  {
    margin: 0 0 1em 0;
  }
}
